<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品线产能设置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h2>生产线产能管理</h2>
<div id="app">
    <div style="margin-left: 20px;margin-top: 20px">
        <el-button type="warning" @click="dialogFormVisible = true" icon="el-icon-plus">添加产能线</el-button>
    </div>
    <el-table style="width: 100%"
              :data="Page"
              ref="Table"
              @selection-change=""
              row-key="id">
        <el-table-column label="编号">
            <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="名称">
            <template slot-scope="scope">
                <span>{{ scope.row.productionName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="生产能力">
            <template slot-scope="scope">
                <span>{{ scope.row.productionCapacity }}组/天</span>
            </template>
        </el-table-column>
        <el-table-column label="负责人">
            <template slot-scope="scope">
                <span>{{ scope.row.principal }}</span>
            </template>
        </el-table-column>
        <el-table-column label="产线人数">
            <template slot-scope="scope">
                <span>{{ scope.row.num }}</span>
            </template>
        </el-table-column>
        <el-table-column label="生产状态:(-1未生产，1已生产)">
            <template slot-scope="scope">
                <span style="color: red">{{ scope.row.state }}</span>
            </template>
        </el-table-column>
        <el-table-column label="备注">
            <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        @click="handleChange(scope.$index, scope.row)"
                ></el-button>
                <span style="margin-left: 5px"></span>
                <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleRemove(scope.$index, scope.row)"
                ></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="产能操作" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog">
        <el-form :model="Page0">
            <el-form-item label="序号">
                <el-input v-model="Page0.id" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="Page0.productionName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产能力">
                <el-input v-model="Page0.productionCapacity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="Page0.principal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产线人数">
                <el-input v-model="Page0.num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产状态">
                <el-input v-model="Page0.state" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="Page0.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePage()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //加载的初始数据
                Page:[],
                //表单临时数据
                Page0:{
                    id:"",productionName:"",productionCapacity:"",principal:"",num:"",state:"",remark:""
                },
                // 模态框
                dialogFormVisible: false,

            }
        },
        methods:{
            //加载数据
            loadPage:function(){
                axios.get("/productionLines")
                    .then(res=>{
                        this.Page = res.data;
                    });
            },
            //更新或者添加
            savePage(){
                let p = JSON.parse(JSON.stringify(this.Page0));
                if(this.Page0.id){
                    axios.put("/productionLine",p)
                        .then(res=>{
                            if(res.data === "ok"){
                                this.loadPage(this.current);
                                this.$message("修改成功!");
                            }
                        });
                }else {
                    axios.post("/productionLine",p)
                        .then(res => {
                            if(res.data === "ok"){
                                this.loadPage();
                                this.$message("添加成功!");
                            }
                        });
                }
                this.dialogFormVisible=false;
            },
            closeDialog(){
                this.Page0 =  {id:"",productionName:"",productionCapacity:"",principal:"",num:"",state:"",remark:""}
            },
            //更新按钮
            handleChange(index,row){
                this.dialogFormVisible=true;
                this.Page0=row;
            },
            //删除按钮
            handleRemove(index,row){
                axios.delete("/productionLine/"+row.id)
                    .then(res =>{
                        if(res.data === "ok"){
                            this.loadPage(this.current);
                            this.$message("删除成功!");
                        }
                    });
            },
        },

        mounted() {
            this.loadPage();
        }
    })
</script>
</html>